<template>
	<view>
		<view class="fixed-search">
		   <my-search @click="gotoSearch" ></my-search>
		</view>
    <view class="volunteers_list">
      <view v-for="(item, i) in activities" :key="i" @click="gotoDetail(item.id)">
        <my-volunteer :activity="item" :myKey="0"></my-volunteer>
      </view>
    </view>
     <!-- 悬浮按钮 -->
   <view class="fab" @click="onFabClick">
      <text class="fab-icon">+</text>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        queryObj: {
          pagenum: 1,
          pagesize: 10,
          query: '',
        },
				activities: [],
        isLoad: false,
        actLen: 0
			};
		},

    onLoad(options) {
      this.queryObj.query = options.query || ''
      this.getActivity();
    },
    methods:{
      gotoSearch(){
        uni.navigateTo({
          url:'../../subpkg/search/search'
        })
      },
      async getActivity(cd){
        this.isLoad = true
        const { data : res } = await uni.$http.get('/activities', this.queryObj);
        this.isLoad = false
        // 检查 cd 是否为函数
        if (typeof cd === 'function') {
          cd();
        }
        console.log(res);
        if(res.code !== 1) return uni.$showMsg()
        this.activities = [...this.activities, ...res.data.rows]
        this.actLen = res.data.total
      },
      gotoDetail(item){
        uni.navigateTo({
          url:'../../subpkg/activity-one-detail/activity-one-detail?query=' + item
        })
      },
      // 悬浮按钮点击事件
      onFabClick() {
        uni.navigateTo({
          url:'../../subpkg/add-activity/add-activity'
        })
      },
    },
    onReachBottom() {
      if (this.queryObj.pagenum * this.queryObj.pagesize >= this.actLen) {
        return;
      }
      if (this.isLoad) return;
      this.queryObj.pagenum++;
      this.getActivity()
    },
    onPullDownRefresh() {
      this.queryObj.pagenum = 1
      this.total = 0
      this.isLoad = false
      this.activities = []
      this.getActivity(() => {
        uni.stopPullDownRefresh()
      })
    },
    
	}
</script>

<style lang="scss">
.fixed-search {
  position: fixed; /* 固定定位 */
  top: 0; /* 距离顶部 0 */
  left: 0; /* 距离左侧 0 */
  width: 100%; /* 宽度占满屏幕 */
  z-index: 999; /* 确保搜索框在最上层 */
  background-color: #fff; /* 背景色（根据需要调整） */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影（可选） */
}

.volunteers_list {
  //padding-top: 60px; /* 为搜索框留出空间，避免内容被遮挡 */
  margin-top: 60px; /* 根据搜索框的高度调整 */
}

.fab {
  position: fixed; // 固定定位
  right: 20px; // 距离右侧 20px
  bottom: 20px; // 距离底部 20px
  width: 56px; // 按钮宽度
  height: 56px; // 按钮高度
  background-color: #007aff; // 背景颜色
  border-radius: 50%; // 圆形按钮
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); // 阴影效果
  z-index: 999; // 确保按钮在最上层

  .fab-icon {
    color: #fff; // 图标颜色
    font-size: 24px; // 图标大小
  }
}
</style>
